import React,{Component} from "react";
import {connect} from 'react-redux';
import * as actions from '../action';
import {
    Table, Input, Button, Popconfirm, Form,
  } from 'antd';
const mapStateToProps=(state)=>{
    return {
        carts:state.carts
    }
}
// const columns = [{
//     title: 'Name',
//     dataIndex: 'title',
//     render: text => <a href="javascript:;">{text}</a>,
//   }, {
//     title: 'price',
//     dataIndex: 'price',
//   }, {
//     title: 'num',
//     dataIndex: 'num',
//   },
// {
//     title:'小计',
//     dataIndex:'payfor'
// },{
//     title: 'operation',
//     dataIndex: 'operation',
//     render: (text, record) => (
//         (
//           <Popconfirm title="Sure to delete?" onConfirm={()=>{
            
//           }}>
//             <a href="javascript:;">Delete</a>
//           </Popconfirm>
//         ) 
//     ),
//   }];
  var data = [];
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };

 class Carts extends Component{
 
    showcarts=()=>{
        data=[];
        console.log(this.props.carts);
        this.props.carts.map((item,index)=>{
            var obj={};
            obj.key=index;
            obj.id=item.id;
            obj.title=item.title;
            obj.price=item.price;
            obj.num=item.quantity;
            obj.payfor=item.price*item.quantity;
            console.log(obj);
            data.push(obj);
        })
    }
    render() {
        const columns = [{
            title: 'Name',
            dataIndex: 'title',
            render: text => <a href="javascript:;">{text}</a>,
          }, {
            title: 'price',
            dataIndex: 'price',
          }, {
            title: 'num',
            dataIndex: 'num',
          },
        {
            title:'小计',
            dataIndex:'payfor'
        },{
            title: 'operation',
            dataIndex: 'operation',
            render: (text, record) => (
                (
                  <Popconfirm title="Sure to delete?" onConfirm={()=>{
                      console.log(record);
                    this.props.removeCart(record);
                  }}>
                    <a href="javascript:;">Delete</a>
                  </Popconfirm>
                ) 
            ),
          }];
        console.log(this.props);
        return(
            <div>
                {this.showcarts()}
                  <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
                  <Button type="danger" style={{float:"right",marginRight:20}}>购买</Button>
            </div>
        )
    }
}
export default connect(mapStateToProps,actions)(Carts);